<template>
	<view class="container">

		<view class="background_box">
			<!-- <image src="/static/images/particulars.png" mode="widthFix"></image> -->
			<rich-text :nodes="previewImg"></rich-text>
		</view>

		<view class="background_text">
			<text style="color: #6e3200;">已有 <text style="color: #F25000;margin: 0 14rpx;">{{number}}</text> 人参加</text>
		</view>

		<!-- 报名弹框 -->
		<van-popup :show="applyshow" round custom-style="height: 50%;width: 75%;" @close="onapplyClose">
			<view class="applyshow_img" style="display: flex;">
				<image class="minImage" src="/static/images/challenge/fill.png" mode="widthFix"></image>
			</view>
			<van-field :model:value="NameValue" placeholder="请输入姓名" @change="NameValue = $event.detail" />
			<van-field :model:value="PhoneValue" placeholder="请输入手机号" maxlength="11"
				@change="PhoneValue = $event.detail" />
			<van-cell @click="SheetshowValue">
				<text slot="title" class="Cell_title">{{SheetValue}}</text>
			</van-cell>
			<!-- <button type="success" class="apply_button" @click="">我要报名</button> -->
			<view class="apply_button" @click="activityUser">
				<image src="/static/images/challenge/make.png" mode="widthFix"></image>
			</view>
		</van-popup>

		<!-- 参与活动弹框 -->
		<van-popup :show="Pationshow" round position="bottom" custom-style="height: 80%" @close="onPationClose">
			<view class="applyshow_img" style="display: flex;">
				<image class="minImage1" src="/static/images/challenge/pation.png" mode="widthFix"></image>
			</view>
			<van-cell @click="Choicecouponshow = true">
				<text slot="title" class="Cell_title">{{ChoicecouponValue}}</text>
			</van-cell>

			<view class="Pationshow_title">
				<h1>所得相应的优惠劵</h1>
			</view>

			<view class="Pationshow_box">
				<image v-if="ChoicecouponId == 5" src="/static/images/challenge/none.png" class="maxImage" mode="widthFix">
				</image>
				<image v-if="ChoicecouponId == i" :src="item" mode="widthFix" v-for="(item,i) in ChoicecouponImage"
					:key="i">
				</image>
			</view>
			<!-- 领取优惠劵 -->
			<view v-if="!received" class="Pationshow_box_image" @click="getactivity">
				<image src="/static/images/challenge/coupon6.png" mode="widthFix"></image>
			</view>
			<view v-if="received" class="Pationshow_box_image">
				<image src="/static/images/challenge/coupon7.png" mode="widthFix"></image>
			</view>

			<view class="Pationshow_box_image1" @click="updateShow">
				<image src="/static/images/challenge/examine.png" mode="widthFix"></image>
			</view>
		</van-popup>

		<!-- 选择门店 -->
		<van-popup :show="Pickershow" round position="bottom" custom-style="height: 50%" @close="Pickershow = false">
			<van-picker :columns="actions" show-toolbar @confirm="Pickerconfirm" @cancel="Pickershow = false" />
		</van-popup>

		<!-- 选择优惠劵 -->
		<van-popup :show="Choicecouponshow" round position="bottom" custom-style="height: 50%"
			@close="Choicecouponshow = false">
			<van-picker :columns="Choicecouponactions" show-toolbar @confirm="Choicecouponconfirm"
				@cancel="Choicecouponshow = false" />
		</van-popup>

		<!-- 优惠劵 -->
		<van-popup  @touchmove.stop="touchMove"
			:show="Couponshow" round position="bottom" custom-style="height: 80%" @close="onPationClose">
			<view class="applyshow_img" style="display: flex;">
				<image class="minImage1" src="/static/images/challenge/pation.png" mode="widthFix"></image>
			</view>

			<view class="applyshow_image" @click="updateShow1">
				<image src="/static/images/challenge/fanhui.png" mode="widthFix"></image>
			</view>
			
			<view class="applyshow_erwei">
				<canvas class="applyshow_erwei_img" :style="{ width: qrcodeSize + 'px', height: qrcodeSize + 'px' }"
					canvas-id="memberCode"></canvas>
			</view>

			<view class="applyshow_title">
				<text>{{activityList.couponName}}一张</text>
			</view>

			<view class="applyshow_text">
				<view class="applyshow_text_box">
					<h1>使用状态</h1>
					<text v-if="activityList.status == 0">未使用</text>
					<text v-if="activityList.status == 1">已使用</text>
					<text v-if="activityList.status == 2">已过期</text>
				</view>
				<view class="applyshow_text_box">
					<h1>有效期</h1>
					<text>当天有效</text>
				</view>
				<view class="applyshow_text_box">
					<h1>到期时间</h1>
					<text>今天</text>
				</view>
				<view class="applyshow_text_box">
					<h1>类型</h1>
					<text>{{activityList.couponType == 0?'折扣卷':'现金券'}}</text>
				</view>
				<view class="applyshow_text_box">
					<h1>描述</h1>
					<text>{{activityList.remark}}</text>
				</view>
			</view>
		</van-popup>

		<view class="new_pet">
			<view class="new_pet_button">
				<image src="/static/images/challenge/attend.png" mode="widthFix" @click="getPationshow"></image>
			</view>
			<view class="new_pet_button">
				<image src="/static/images/challenge/apply.png" mode="widthFix" @click="getapplyshow"></image>
			</view>
		</view>
	</view>
</template>

<script>
	const qrCode = require('@/libs/weapp-qrcode.js');
	import {
		partidetail,
		activityapply,
		activitycoupon,
		getactivityapply
	} from '@/api/activity.js'
	import {
		mapGetters,
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				// 报名弹框
				applyshow: false,
				// 参与活动
				Pationshow: false,
				// 优惠劵弹框
				Couponshow: false,
				// 选择优惠劵
				Choicecouponshow: false,
				// 选择门店
				Pickershow: false,
				NameValue: '',
				PhoneValue: '',
				SheetValue: '请选择活动的门店',
				SheetValueId: '',
				ChoicecouponValue: '请选择踢馆高度',
				ChoicecouponImage: [],
				ChoicecouponId: 5,
				actions: [],
				Choicecoupon: [],
				Choicecouponactions: [],
				// 优惠劵ID
				ChoicecouponactionsId: '',
				number: 0,
				previewImg: '',
				activityId: '',
				// 是否领取优惠劵
				received: false,
				// 已领取优惠劵的详情
				activityItem: {},
				// 已领取优惠劵的详情
				activityList: [],
				qrcodeSize: uni.upx2px(260),
			};
		},
		onLoad(options) {
			this.activityId = options.id
			this.getpartidetailList()
		},
		computed: {
			...mapGetters('m_shop', ['shop']),
			...mapGetters('m_user', ['isLogin', 'userInfo']),
		},
		//发送给朋友
		onShareAppMessage: function() {
			return {
				title: "门票闯关免费拿-神兽羊驼体验馆",
        imageUrl: "http://dev-1256206693.cos.ap-beijing.myqcloud.com/upload/20210105/1baeee01a05a273297c65145c2b6398b.jpg"
			};
		},
		//分享到朋友圈
		onShareTimeline: function() {
			return {
				title: "门票闯关免费拿-神兽羊驼体验馆",
				imageUrl: "http://dev-1256206693.cos.ap-beijing.myqcloud.com/upload/20210105/1baeee01a05a273297c65145c2b6398b.jpg"
			};
		},
		methods: {
			getpartidetailList(id) {
				partidetail(this.activityId).then(res => {
					// console.log(res)
					this.previewImg = res.data.detail
					this.received = res.data.received
          // console.log(res.data.received)
					this.number = res.data.applyCount
					this.Choicecoupon = res.data.activityItemes
					res.data.activityItemes.forEach(item => {
						this.Choicecouponactions.push(item.item)
						this.ChoicecouponImage.push(item.favourableImg)
					})
					if (this.received) {
						this.activityItem = res.data.activityItemes.filter(item => item.received)
						this.ChoicecouponId = res.data.activityItemes.findIndex(item => item.received)
						// console.log(res.data.activityItemes)
						this.ChoicecouponValue = this.activityItem[0].item
					}
					// console.log(this.activityItem)
					this.shop.forEach(item => {
						this.actions.push(item.fullName)
					})
				})
			},
			makeMemberCode(text) {
				new qrCode('memberCode', {
					text: text,
					width: this.qrcodeSize,
					height: this.qrcodeSize,
					colorDark: '#333333',
					colorLight: '#FFFFFF',
					correctLevel: qrCode.CorrectLevel.H
				});
			},
			onapplyClose() {
				this.applyshow = false
				this.SheetValue = '请选择活动的门店'
				this.NameValue = ''
				this.PhoneValue = ''
			},
			navTo(url) {
				uni.navigateTo({
					url: url
				})
			},
			SheetshowValue() {
				this.Pickershow = true
			},
			SheetSelect(e) {
				// console.log(e.detail.name)
				this.SheetValue = e.detail.name
			},
			getPationshow() {
				if (this.isLogin) {
					this.Pationshow = true
				} else {
					uni.showToast({
						title: '请先登录',
						icon: 'none'
					})
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}
			},
			getapplyshow() {
				if (this.isLogin) {
					this.applyshow = true
				} else {
					uni.showToast({
						title: '请先登录',
						icon: 'none'
					})
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}
			},
			onPationClose() {
				// this.ChoicecouponValue = '请选择踢馆高度'
				this.Pationshow = false
				this.Couponshow = false
			},
			updateShow() {
				const that = this
				if (this.received) {
					getactivityapply(this.activityItem[0].favourable).then(res => {
						// console.log(res)
						this.activityList = res.data;
						
						const params = {
							userId: this.userInfo.id,
							activityId: this.activityList.id,
							type: 2 //0购卡 1 会员卡使用 2 门票
						}
						that.makeMemberCode(JSON.stringify(params))
					}).catch(res => {
						that.$util.Tips({
							title: res
						});
					});
				} else {
					return uni.showToast({
						title: '您还没有优惠劵哦 ~',
						icon: 'none'
					})
				}
				this.Pationshow = false
				this.Couponshow = true
			},
			updateShow1() {
				this.Pationshow = true
				this.Couponshow = false
			},
			Pickerconfirm(e) {
				// console.log(e)
				this.SheetValue = e.detail.value
				this.SheetValueId = this.shop[e.detail.index].id
				this.Pickershow = false
			},
			Choicecouponconfirm(e) {
				this.ChoicecouponValue = e.detail.value
				this.Choicecouponshow = false
				this.ChoicecouponId = e.detail.index
				this.ChoicecouponactionsId = this.Choicecoupon[e.detail.index].id
			},
			// 报名
			activityUser() {
				const that = this
				if (that.NameValue != '' && that.PhoneValue != '') {
					if ((/^1[3-9]\d{9}$/.test(that.PhoneValue))) {
						const user = {
							username: that.NameValue,
							tel: that.PhoneValue,
							shopId: that.SheetValueId,
							activityId: that.activityId
						}
						// console.log(user)
						activityapply(user).then(res => {
							that.$util.Tips({
								title: '报名成功！'
							});
						}).catch(res => {
							// console.log(res)
							that.$util.Tips({
								title: res
							});
						});
						that.applyshow = false
					} else {
						return uni.showToast({
							title: '手机号格式有误！',
							icon: 'none'
						})
					}
				} else {
					return uni.showToast({
						title: '请填写您的姓名以及手机号！',
						icon: 'none'
					})
				}
				// activityapply(user).then(res => {
				//   console.log(res)
				// })
			},
			// 领取优惠劵
			getactivity() {
				const that = this
				if (this.activityId && this.ChoicecouponactionsId) {
					activitycoupon(this.activityId, this.ChoicecouponactionsId).then(res => {
						that.getpartidetailList()
						that.$util.Tips({
							title: '领取优惠劵成功！'
						});
					}).catch(res => {
						that.$util.Tips({
							title: '请先报名！'
						});
					});
				} else {
					return uni.showToast({
						title: '请先选择优惠劵类型！',
						icon: 'none'
					})
				}
			},
			touchMove(e) {
				// #ifdef APP-NVUE
				e.stopPropagation()
				// #endif
			}
		}
	}
</script>

<style lang="scss">
	.container {
		padding-bottom: 128rpx;
	}


	/deep/ .van-picker__cancel,
	.van-picker__confirm {
		color: #794113 !important;
	}

	/deep/ .van-popup {
		padding: 45rpx 40rpx;
		// border-top: 6rpx solid #F25000 !important;
		box-sizing: border-box;
		position: relative;
		// max-height : none;

		.minImage {
			position: absolute;
			top: -40rpx;
			// left: 116rpx;
			width: 288rpx;
			z-index: 999;
		}

		.minImage1 {
			position: absolute;
			top: -38rpx;
			// left: 116rpx;
			width: 378rpx;
			z-index: 999;
		}

		.Pationshow_title {
			font-size: 40rpx;
			color: #6e3200;
			margin-top: 80rpx;
		}

		.Pationshow_box {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 230rpx;
			border: 4rpx dashed #6e3200;
			border-radius: 20rpx;
			margin-top: 30rpx;

			image {
				width: 520rpx;
			}

			.maxImage {
				width: 74rpx;
			}
		}

		.Pationshow_box_image {
			margin-top: 150rpx;

			image {
				width: 100%;
			}
		}

		.Pationshow_box_image1 {
			margin-top: 30rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			image {
				width: 260rpx;
			}
		}

		.applyshow_image {
			position: absolute;
			top: -110rpx;

			image {
				width: 97rpx;
				height: 97rpx;
			}
		}

		.applyshow_erwei {
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: 35rpx;
			position: relative;

			// height: 288rpx;
			.applyshow_erwei_img {}
		}

		.applyshow_title {
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 38rpx;
			color: #6e3200;
			padding: 35rpx 0 50rpx;
			border-bottom: 2px dashed #6e3200;
		}

		.applyshow_text {
			.applyshow_text_box {
				display: flex;
				align-items: center;
				padding-left: 10rpx;
				margin-top: 45rpx;
				font-size: 36rpx;
				font-weight: 500;
			}

			h1 {
				width: 50%;
				color: #a98f80;
			}

			text {
				width: 50%;
				color: #6e3200;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
			}
		}

	}

	/deep/ .applyshow_img {
		display: felx !important;
		justify-content: center;
	}

	/deep/ .van-cell {
		padding-top: 25rpx !important;
		padding-bottom: 25rpx !important;
		align-items: center;
		width: 100% !important;
		border: 4rpx solid #6E3200;
		border-radius: 20rpx;
		margin: 40rpx 0;
	}

	/deep/ .van-cell__title {
		font-size: 40rpx;
		// line-height: 64rpx;
	}

	.background_box {
		width: 100%;

		image {
			width: 100%;
		}
	}

	.background_text {
		position: absolute;
		top: 474rpx;
		width: 100%;
		text-align: center;
		font-weight: bold;
	}

	.apply_button {
		margin-top: 30rpx;

		// background-color: #FDD338;
		image {
			width: 100%;
		}
	}

	.Cell_title {
		font-size: 30rpx;
	}

	.new_pet {
		position: fixed;
		bottom: 0;
		z-index: 20;
		width: 750rpx;
		height: 136rpx;
		box-sizing: border-box;
		background-color: #fff;
		display: flex;
		border-top: 4rpx solid #F25000;

		.new_pet_button {
			width: 50%;
			height: 100%;
			// background-color: #FDD338;
			border-radius: 0;
			color: rgba(61, 61, 61, 1);
			line-height: 112rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			image {
				width: 304rpx;
				height: 98rpx;
			}
		}
	}
</style>
